<template>
    <view class="bg-[#f8f8f8] min-h-screen">
        <view class="h-[1rpx]"></view>
        <view class="mt-[20rpx] px-[40rpx] text-[30rpx] font-medium bg-white pb-[60rpx]">
            <view class="py-[34rpx] flex items-center border-b border-[#EFEFEF]">
                <text>活动名称:</text>
                <input class="ml-[30rpx] flex-1" type="text" placeholder="请输入活动名称">
            </view>
            <view class="py-[34rpx] flex items-center border-b border-[#EFEFEF] w-full">
                <text>活动范围:</text>
                <input class="ml-[30rpx] flex-1 " type="text" placeholder="请选择班级，可多选">
                <u-icon name="arrow-right" color="#575B66" size="16"></u-icon>
            </view>
            <view class="py-[34rpx]  flex items-center border-b border-[#EFEFEF] w-full">
                <text>打卡开始时间:</text>
                <input class="ml-[30rpx] flex-1 " type="text" placeholder="请选择打卡开始时间">
                <u-icon name="arrow-right" color="#575B66" size="16"></u-icon>
            </view>
            <view class="py-[34rpx]  flex items-center border-b border-[#EFEFEF] w-full">
                <text>活动开始时间:</text>
                <input class="ml-[30rpx] flex-1 " type="text" placeholder="请选择活动开始时间">
                <u-icon name="arrow-right" color="#575B66" size="16"></u-icon>
            </view>
            <view class="py-[34rpx] flex items-center border-b border-[#EFEFEF]">
                <text>活动结束时间:</text>
                <input class="ml-[30rpx] flex-1" type="text" placeholder="请选择活动结束时间">
                <u-icon name="arrow-right" color="#575B66" size="16"></u-icon>
            </view>
            <view class="py-[34rpx] flex items-center border-b border-[#EFEFEF]">
                <text>活动简介:</text>
                <input class="ml-[30rpx] flex-1" type="text" placeholder="请输入活动简介">

            </view>
            <view class="py-[34rpx] flex items-center border-b border-[#EFEFEF]">
                <text>活动地址:</text>
                <input class="ml-[30rpx] flex-1" type="text" placeholder="请输入班级简介">
                <u-icon name="map-fill" color="#007AFF" size="16"></u-icon>
            </view>
            <view class="py-[34rpx] flex items-center justify-between border-b border-[#EFEFEF]">
                <view>
                    <text>活动券设置:</text>
                    <text class="ml-[30rpx]">吹蜡烛</text>
                </view>

                <text @click="show = true">+添加</text>
            </view>

        </view>
        <view class="mt-[105rpx] flex justify-center">
            <view
                class="w-[208rpx] rounded font-medium text-[30rpx] px-1 bg-[#FD755D] text-white h-[88rpx] flex justify-center items-center">
                确定</view>
        </view>
    </view>
    <u-popup :show="show"  round="19" @close="show = false">
        <view class="text-[34rpx] mx-[40rpx] pt-[20rpx]">
            <view class="text-center mt-[20rpx]">
                <text class=" font-bold ">活动券设置</text>
            </view>

            <view class="flex items-center justify-between mt-[78rpx]">
                <text>活动券名称：</text>
                <input class="flex-1" type="text" placeholder="请输入活动券名称">
            </view>
            <view class="flex items-center justify-between mt-[60rpx]">
                <text>说明：</text>
                <input class="flex-1" type="text" placeholder="请输入说明">
            </view>
            <view class="flex items-center justify-between mt-[60rpx]">
                <text>有效期：</text>

            </view>
            <view class="mt-[105rpx] flex justify-center">
            <view
                class="w-[208rpx] rounded font-medium text-[34rpx] px-1 bg-[#FD755D] text-white h-[88rpx] flex justify-center items-center">
                确定</view>
        </view>
        </view>
    </u-popup>
</template>
<script setup>
import { ref } from 'vue'
const show = ref(false)
</script>
<style lang="scss" scoped></style>